import {observer} from 'mobx-react-lite';
import {Path} from 'react-native-svg';
import {useGlobalStore} from '../../mobx';
import {getColorStr} from '../../themes';
import {SvgCommon} from './Common';
import {IconProps} from './types';

export const SvgPrePage = observer((props: IconProps) => {
  const {colorKey = 'color_31'} = props;
  const {theme} = useGlobalStore();
  return (
    <SvgCommon {...props}>
      {/* <rect width="24" height="24" transform="matrix(-1 0 0 1 24.6687 0.5)" fill="#242424"/> */}
      <Path
        d="M6.6687 3.5H18.6687C20.3256 3.5 21.6687 4.84315 21.6687 6.5V18.5C21.6687 20.1569 20.3256 21.5 18.6687 21.5H6.6687C5.01185 21.5 3.6687 20.1569 3.6687 18.5V6.5C3.6687 4.84315 5.01185 3.5 6.6687 3.5Z"
        fill="white"
        stroke={getColorStr(theme, colorKey)}
        strokeWidth="1.5"
        strokeLinecap="round"
      />
      <Path
        d="M14.823 8.19128L10.9385 12.0757C10.7042 12.3101 10.7042 12.6899 10.9385 12.9243L14.823 16.8087"
        stroke={getColorStr(theme, colorKey)}
        strokeWidth="1.5"
        strokeLinecap="round"
      />
    </SvgCommon>
  );
});
